<template>
  <div class="chargeCoin-Container">
    <div class="head">
      <div class="opt">
        <el-button type="primary" @click="dialogCoin = true">充币</el-button>
      </div>
      <div class="search">
        <el-input
          placeholder="请输入手机号,姓名"
          suffix-icon="el-icon-search"
          v-model="search"
          @keyup.enter.native="getList()"
        ></el-input>
      </div>
    </div>

    <el-table :data="List" border style="width: 100%">
      <el-table-column prop="index" label="序号" width="120"></el-table-column>
      <el-table-column prop="nikeName" label="姓名"></el-table-column>
      <el-table-column prop="userPhone" label="手机号"></el-table-column>
      <el-table-column prop="beansNo" label="充币数量"></el-table-column>
      <el-table-column prop="createTime" label="时间"></el-table-column>
      <el-table-column label="支付方式">
        <template slot-scope="scope">
          <el-button type="text" v-show="scope.row.payType == 0">未知</el-button>
          <el-button type="text" v-show="scope.row.payType == 1">支付宝</el-button>
          <el-button type="text" v-show="scope.row.payType == 2">微信</el-button>
          <el-button type="text" v-show="scope.row.payType == 3">平台代充</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="paginat">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage4"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 充币 -->
    <el-dialog title="充币" :visible.sync="dialogCoin" width="30%">
      <div class="phoneSearch">
        <span class="search">
          <el-input placeholder="请输入手机号" v-model="searchPhone" @keyup.enter.native="findUserList()"></el-input>
        </span>
        <span class="btn">
          <el-button type="primary" @click="findUserList()">搜索</el-button>
        </span>
      </div>
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        :rules="rules"
        label-width="80px"
        class="demo-ruleForm"
      >
        <el-form-item label="姓 名" prop="userId">
          <el-select v-model="ruleForm.userId" placeholder="请选择">
            <el-option
              v-for="item in userList"
              :key="item.id"
              :label="item.nikename"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="充币数量" prop="beansNo">
          <el-input v-model="ruleForm.beansNo" placeholder="请输入充币数量" maxlength="20"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogCoin = false">取 消</el-button>
        <el-button type="primary" @click.native="coinAdd('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogCoin: false,
      search: "",
      searchPhone: "",
      userList: [],
      List: [],
      total: 0,
      val: 1, //当前多少页
      currentPage4: 1,
      ruleForm: {
        beansNo: "",
        userId: ""
      },
      rules: {
        userId: [{ required: true, message: "请选择用户", trigger: "blur" }],
        beansNo: [
          { required: true, message: "请选择交易数量", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //充币
    findUserList() {
      let url = "/coin/findPhoneUser/" + this.searchPhone;
      this.httpGet(url, res => {
        if (res.code == 200) {
          this.userList = res.data;
        }
      });
    },
    //确定
    coinAdd(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let url = "/coin/adminAdd";
          let params = {
            beansNo: this.ruleForm.beansNo,
            transAmt: this.ruleForm.beansNo,
            userId: this.ruleForm.userId
          };
          this.httpPost(url, params, res => {
            if (res.code == 200) {
              this.$message({
                message: "充值成功",
                type: "success"
              });
              this.dialogCoin = false;
              this.ruleForm = {};
              this.searchPhone = ""
            }else{
                this.$message({
                message:res.message,
                type: "warning"
              });
              this.searchPhone = "";
            }
          });
        }
      });
    },
    //分页
    handleCurrentChange(val) {
      this.val = val;
      this.getList();
      console.log(`当前页: ${val}`);
    },
    getList() {
      let url = "/coin/getList";
      let params = {
        key: this.search,
        pageNum: this.val,
        pageSize: 10
      };
      this.httpPost(url, params, res => {
        if (res.code == 200) {
          this.List = res.data.list;
          this.total = res.data.total;
          this.List.forEach((element, i) => {
            this.List[i].index = (this.val - 1) * 10 + i + 1;
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.head {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .search {
    width: 300px;
  }
}
.phoneSearch {
  width: 92%;
  height: 70px;
  margin-left: 4%;
  .search {
    display: inline-block;
    width: 80%;
    height: 40px;
  }
  .btn {
    display: inline-block;
    width: 18%;
    height: 40px;
  }
}
</style>

<style lang="scss">
.chargeCoin-Container {
  .el-button + .el-button {
    margin-left: 0px !important;
  }
}
.chargeCoin-Container {
  .el-select {
    width: 100%;
  }
}
</style>
